<template>
	<view>
		<view class="swiper">
			<u-swiper radius="1" height="280" :list="list1" @click="click"></u-swiper>
			<image @click="fanhui" :style="{ top: safeTop }" class="fanhui-img" src="../../static/index/fanhui.png" mode=""></image>
		</view>
		<view class="shop-info-box">
			<view class="month-card" @click="toMonthCard">
				<view class="month-card-text">
					<image class="king-img" src="../../static/index/king.png" mode=""></image>
					<text>畅打月卡</text>
					每天上午8:00-15:00可免费畅打
				</view>
				<image class="month-img" src="../../static/index/month-right.png" mode=""></image>
			</view>
			<view class="shop-info">
				<view class="shop-name">店铺名·24H自助台球(红旗路店)</view>
				<view class="shop-status-bar">
					<view class="shop-status-bar-text">
						<text class="shop-state">营业中</text>
						<text class="rod"></text>
						价格：
						<text class="price">25.5</text>
						起
						<text class="rod"></text>
						<text class="number">空桌数量：4</text>
					</view>
					<view class="shop-status-bar-icon">
						<image @click="showWifi = true" class="shop-icon" src="../../static/index/wifi.png" mode=""></image>
						<image class="shop-icon" src="../../static/index/wx.png" mode=""></image>
						<image class="shop-icon" src="../../static/index/mobile.png" mode=""></image>
					</view>
				</view>
				<view class="location">
					<view class="location-text">上海河南省郑州市金水区经八路街道广厦·城市之巅城市之巅</view>
					<view class="location-img"> <image src="../../static/index/site.png" mode=""></image> </view>
				</view>
				<view class="hint">
					<image src="../../static/index/trumpet.png" mode=""></image>
					有问题请加店长微信464874646，谢谢配合
				</view>
			</view>
		</view>

		<view style="position: relative; top: -80rpx">
			<view class="membership" @click="toVip">
				<view>
					<!-- <image class="v" src="../../static/index/vip.png" mode=""></image> -->
					充值会员享更多优惠
				</view>
				<view>
					立即充值
					<image class="hy-right" src="../../static/index/hy-right.png" mode=""></image>
				</view>
			</view>
			<view class="tabs">
				<u-tabs
					:list="list2"
					@change="change"
					lineWidth="30"
					lineColor="#4BC264"
					:activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
				></u-tabs>
			</view>
			<view class="lsit-box">
				<template v-if="current == 0">
					<view class="each" v-for="(item,index) in 7" @click="showStart">
						<image class="table-bac" src="../../static/index/table-bac.png" mode=""></image>
						<view class="item-state">空闲中</view>
						<!-- <view class="occupy occupy1"> <text>剩余</text> <view>01时47分</view> </view> -->
						<view class="item-name">台球桌-赤甲-1号桌</view>
					</view>
				</template>
				
				<template v-if="current == 1">
					<view class="each each2" v-for="(item,index) in 7">
						<image class="table2-bac" src="../../static/index/table2-bac.png" mode=""></image>
						<!-- <view class="item-state">空闲中</view> -->
						<view class="occupy occupy2"> <text>剩余</text> <view>01时47分</view> </view>
						<view class="item-name">台球桌-赤甲-1号桌</view>
					</view>
				</template>
			</view>
		</view>
		
		
		
		<u-popup :safeAreaInsetBottom="false" :round="24" :show="showWifi" mode="center"  @close="close" @open="open">
		    <view class="pop-wifi-box">
		        <view class="wifi-title">门店WIFI</view>
				<view class="wifi-account">
					<view class="account"> WIFI名称 <text>zhishitaotao</text> </view>
					<view class="account" style="margin-top: 24rpx;"> WIFI名称 <text>zhishitaotao</text> <image class="copy-img" src="../../static/index/copy.png" mode=""></image> </view>
				</view>
				<view class="wifi-btn" @click="showWifi = false">
					确定
				</view>
		    </view>
		</u-popup>
		
		<u-popup :safeAreaInsetBottom="false" :round="24" :show="showTable" mode="center"  @close="close" @open="open">
		    <view class="pop-table-box">
		        <view class="table-title">选择开台方式</view>
				<view class="table-text">可直接开台或预定为您保留桌台</view>
				<view class="direct-btn" @click="toStart">直接开台</view>
				<view class="table-btn" @click="toReserve">去预定</view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			safeTop: uni.getStorageSync('safeTop') || 20 + 'px',
			list1: ['https://cdn.uviewui.com/uview/swiper/swiper1.png'],
			list2: [{ name: '台球' }, { name: '棋牌' }],
			current:0,
			showWifi:false,
			showTable:false
		};
	},
	methods: {
		// 会员充值
		toVip(){
			uni.navigateTo({
				url:'/pages/rechargeVip/rechargeVip'
			})
		},
		// 畅打月卡
		toMonthCard(){
			uni.navigateTo({
				url:'/pages/monthCard/monthCard'
			})
		},
		// 去预定
		toReserve(){
			uni.navigateTo({
				url:'/pages/reserve/reserve'
			})
			this.showTable = false
		},
		// 直接开台
		toStart(){
			uni.navigateTo({
				url:'/pages/start/start'
			})
			this.showTable = false
		},
		showStart(){
			this.showTable = true
		},
		change(e){
			this.current = e.index
		},
		fanhui(){
			uni.navigateBack()
		},
		open() {
		    // console.log('open');
		},
		close() {
		    this.showWifi = false
			this.showTable = false
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f8fa;
}
.swiper {
	width: 750rpx;
	height: 560rpx;
	
	.fanhui-img {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		padding-left: 32rpx;
		z-index: 999;
	}
}

.shop-info-box {
	position: relative;
	top: -70rpx;
	.month-card {
		width: 686rpx;
		height: 110rpx;
		background: linear-gradient(90deg, #fef3d3 0%, #f6ce72 100%);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		line-height: 70rpx;
		.month-card-text {
			font-weight: 500;
			font-size: 22rpx;
			color: rgba(154, 72, 9, 0.7);
			// line-height: 26rpx;
			text {
				font-weight: bold;
				font-size: 24rpx;
				color: #9a4809;
				padding: 0 16rpx;
			}
			.king-img {
				width: 26rpx;
				height: 22rpx;
				vertical-align: middle;
			}
		}
		.month-img {
			width: 22rpx;
			height: 22rpx;
			padding-top: 30rpx;
		}
	}
	.shop-info {
		position: relative;
		top: -40rpx;
		z-index: 9;
		width: 750rpx;
		// height: 374rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.shop-name {
			font-weight: bold;
			font-size: 40rpx;
			color: #1c274c;
			padding: 40rpx 0 0 32rpx;
		}
		.shop-status-bar {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 32rpx;
			.shop-status-bar-text {
				font-weight: 500;
				font-size: 24rpx;
				color: #6b738b;
				.shop-state {
					color: #4bc264;
				}
				.rod {
					display: inline-block;
					width: 2rpx;
					height: 24rpx;
					background: #edeef1;
					margin: 0 16rpx;
				}
				.price {
					color: #ff7b18;
				}
				.number {
				}
			}
			.shop-status-bar-icon {
				.shop-icon {
					width: 40rpx;
					height: 40rpx;
					margin-left: 24rpx;
				}
			}
		}
		.location {
			width: 622rpx;
			// height: 114rpx;
			background: #f7f8fa;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 21rpx 32rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.location-text {
				width: 553rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #1c274c;
			}
			.location-img {
				width: 35rpx;
				height: 33rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				image {
					width: 35rpx;
					height: 33rpx;
				}
			}
		}

		.hint {
			font-weight: 500;
			font-size: 24rpx;
			color: #6b738b;
			image {
				width: 24rpx;
				height: 20rpx;
				padding: 24rpx 32rpx;
				vertical-align: middle;
				margin-right: 16rpx;
			}
		}
	}
}

.membership {
	width: 638rpx;
	background: linear-gradient(90deg, #433c3c 0%, #4b3f42 100%);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	padding: 18rpx 24rpx;
	margin: auto;
	display: flex;
	justify-content: space-between;
	// align-items: center;
	font-weight: 500;
	font-size: 24rpx;
	color: #e9e2ce;
	.v {
		width: 26rpx;
		height: 20rpx;
		vertical-align: middle;
		margin-right: 16rpx;
	}
	.hy-right {
		width: 22rpx;
		height: 22rpx;
		margin-left: 8rpx;
		vertical-align: middle;
	}
}

.tabs {
	margin-top: 24rpx;
}

.lsit-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 32rpx;
	.each {
		width: 331rpx;
		height: 197rpx;
		background: #473D3F;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 24rpx;
		text-align: center;
		position: relative;
		.item-state {
			width: 98rpx;
			height: 98rpx;
			margin: auto;
			border-radius: 50%;
			margin-top: 24rpx;
			background: #4BC264;
			border: 3rpx solid #FFFFFF;
			font-weight: 500;
			font-size: 22rpx;
			color: #FFFFFF;
			line-height: 98rpx;
			position: relative;
		}
		.item-name {
			font-weight: 500;
			font-size: 22rpx;
			color: #FFFFFF;
			margin-top: 10rpx;
			position: relative;
		}
		
		.occupy {
			width: 98rpx;
			height: 82rpx;
			background: #A4A9B7;
			border: 3rpx solid #FFFFFF;
			margin: auto;
			border-radius: 50%;
			background: #A4A9B7;
			border: 3rpx solid #FFFFFF;
			font-weight: 500;
			color: #FFFFFF;
			padding-top: 16rpx;
			text {
				font-size: 22rpx;
			}
			view {
				font-size: 18rpx;
			}
		}
		.occupy1 {
			margin-top: 24rpx;
			position: relative;
		}
		.occupy2 {
			margin-top: 93rpx;
			position: relative;
		}
		
		
		.table-bac {
			width: 331rpx;
			height: 197rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	
	.each2 {
		width: 331rpx;
		height: 331rpx;
		background: #72443B;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		
		.table2-bac {
			width: 331rpx;
			height: 331rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		.item-state {
			margin-top: 93rpx;
			position: relative;
		}
		.item-name {
			margin-top: 16rpx;
		}
	}
}



.pop-wifi-box {
	width: 520rpx;
	// height: 376rpx;
	background: #FFFFFF;
	border-radius: 48rpx 48rpx 48rpx 48rpx;
	padding: 40rpx;
	background: linear-gradient(to bottom,#EFFAF1,#F9FDFA,#FFFFFF,#FFFFFF);
	.wifi-title {
		font-weight: 800;
		font-size: 36rpx;
		color: #1C274C;
	}
	.wifi-account {
		width: 456rpx;
		height: 108rpx;
		background: #F7F8FA;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		padding: 40rpx 32rpx;
		margin-top: 24rpx;
		.account {
			font-weight: 500;
			font-size: 30rpx;
			color: #6B738B;
			text {
				font-weight: 800;
				font-size: 30rpx;
				color: #1C274C;
				padding-left: 26rpx;
			}
			.copy-img {
				width: 26rpx;
				height: 26rpx;
				padding-left: 17rpx;
				vertical-align: middle;
			}
		}
	}
	.wifi-btn {
		width: 520rpx;
		height: 90rpx;
		background: rgba(75,194,100,0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 40rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #4BC264;
		text-align: center;
		line-height: 90rpx;
	}
}


.pop-table-box {
	width: 520rpx;
	// height: 376rpx;
	background: #FFFFFF;
	border-radius: 48rpx 48rpx 48rpx 48rpx;
	padding: 40rpx;
	background: linear-gradient(to bottom,#EFFAF1,#F9FDFA,#FFFFFF,#FFFFFF);
	.table-title {
		font-weight: 800;
		font-size: 36rpx;
		color: #1C274C;
	}
	.table-text {
		font-weight: 500;
		font-size: 24rpx;
		color: #A4A9B7;
		margin-top: 8rpx;
	}
	.direct-btn {
		width: 520rpx;
		height: 90rpx;
		background: #4BC264;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
		margin-top: 40rpx;
	}
	.table-btn {
		width: 520rpx;
		height: 90rpx;
		background: rgba(75,194,100,0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1rpx solid #4BC264;
		font-weight: bold;
		font-size: 28rpx;
		color: #4BC264;
		line-height: 90rpx;
		text-align: center;
		margin-top: 30rpx;
	}
}
</style>
